<template>
    <div class="toast">
        <i v-if="type=='success'" class="iconfont icon-toast_chenggong"></i>
        <i v-else-if="type=='warning'" class="iconfont icon-toast-jinggao"></i>
        <i v-else-if="type=='danger'" class="iconfont icon-toast-shibai_huaban"></i>
        <span>{{msg}}</span>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data () {
        return {


        }
    },
    computed:{
        ...mapState({
            msg:state=>state.ToastStatus.msg,
            type:state=>state.ToastStatus.type
        })
    }
}
</script>

<style lang = "less" scoped>
    .toast{
        position: fixed;
        padding: 10px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        border-radius: 10px;

        .iconfont{
            margin-right: 10px;
        }

        .icon-toast-shibai_huaban{
            color: red;
        }

        .icon-toast_chenggong{
            color: green;
        }
        
        .icon-toast-jinggao{
            color: orange;
        }
    }
</style>
